<template>
	<el-container class="login-container h-100">
		<el-row style="padding:15px;width:100%;position:absolute;top:0;left:0;z-index:199 " class="h-100">
			<el-col :span="24" class="h-100">
				<el-main class="login-panel animate__animated animate__fadeInDown  animate__faster">
					<el-form ref="form" label-width="50px" style="margin-top: 10px">
						<div style="font-size: 18px;font-weight: 600;margin-bottom: 20px;padding-left: 10px;">用户登录</div>
						<el-form-item label="用户">
							<el-input v-model="form.account"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="form.password" type="password"></el-input>
						</el-form-item>
						<el-form-item label="" style="margin-bottom: 35px;">
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="login">登录</el-button>
							<el-button @click="reset">重置</el-button>
						</el-form-item>
					</el-form>

					<!-- 验证码 -->
					<div v-show="show" class="validate">
						<div style="overflow: hidden;" class="head">
							<div class="left">请完成安全验证</div>
							<div class="right">
								<i class="el-icon-close" @click="handleClose"></i>
							</div>
						</div>
						<slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail"
							@refresh="onRefresh" :imgs="puzzleImgList" :accuracy="accuracy" :slider-text="text" :w="360" :h="182" />
					</div>
				</el-main>
			</el-col>
		</el-row>

		<!-- 例子特效  -->
		<div style="position: fixed;width: 100%; height: 100%;">
			<vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle" :particleSize="4"
				linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2"
				:hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" />
		</div>
	</el-container>
</template>

<script>
// 解决粒子报错：https://blog.csdn.net/ypz131023/article/details/100540897?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~default-3.nonecase
import Vue from 'vue';
import VueParticles from 'vue-particles'
import SlideVerify from 'vue-monoplasty-slide-verify';
Vue.use(SlideVerify);
Vue.use(VueParticles)
export default {
	name: 'login',
	data() {
		return {
			form: {
				account: 'admin',
				password: '123456',
				code: null,
			},

			// 滑块
			puzzleImgList: [],
			msg: "",
			text: "向右滑动滑块填充拼图",
			// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
			// https://blog.csdn.net/yinge0508/article/details/109999039
			accuracy: 1,
			show: false,
			isValidate: false,
		};
	},
	mounted() {
		sessionStorage.clear();
		this.$store.commit('logout');
		this.$nextTick(() => {
			this.tabBg();
		});
	},
	methods: {
		// 验证码
		onSuccess(times) {
			let ms = (times / 1000).toFixed(1);
			this.msg = "login success, 耗时 " + ms + "s";
			this.isValidate = true;
			this.show = false;
			this.login();
		},
		onFail() {
			this.msg = "";
		},
		onRefresh() {
			this.msg = "";
		},
		onFulfilled() {
		},
		onAgain() {
			this.msg = "try again";
			// 刷新
			this.$refs.slideblock.reset();
		},
		handleClick() {
			// 父组件直接可以调用刷新方法
			this.$refs.slideblock.reset();
		},
		handleClose() {
			this.show = false;
		},

		/**
		 * 登录
		 */
		login() {
			const login = () => {
				// 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) 
				this.$store.commit('login', {
					Token: 'this is token',
					account: this.form.account,
					password: this.$utils.doData.md5(this.form.password),
					loginTime: this.$utils.formatter.moment().format('YYYY-MM-DD HH:mm:ss')
				})
				let redirect = decodeURIComponent(this.$route.query.redirect || '/');
				this.$router.push({
					path: redirect,
					query: {
						date: new Date().getTime()
					}
				});
			}
			// 校验
			if (!this.form.account || !this.form.password) {
				this.$utils.el.warning('用户名或密码不能为空');
				return;
			}
			if (this.isValidate) {
				this.show = false;
				login();
			} else {
				this.show = true;
			}
			return;
		},

		// 重置
		reset() {
			this.form.account = null;
			this.form.password = null;
			this.form.code = null;
		},

		// 切换背景
		tabBg() {
			const bg = document.getElementsByClassName('login-container');
			var random = Math.ceil(Math.random() * 14);
			// bg[0].style.background = 'url(' + require('../../assets/images/bg-login-00' + random + '.jpg') + ')';
			// bg[0].style.backgroundSize = 'cover';
		},
	}
};
</script>
